<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人中心</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style>
			.botText {
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: rgba(255, 255, 255, 1);
				opacity: 0.25;
				height: 1.5rem;
				line-height: 1.5rem;
			}
			.tab{
				font-weight: 600;color: black;margin-top: 0.375rem;cursor: pointer;
			}
			.tabAll{
				color: #999999;font-weight: 600;font-size: 0.875rem;cursor: pointer;
			}
			.choice{
				color: #007D36;
			}
		
			a:hover{
				color: #007D36;
			}
		</style>
	</head>
	<body>
		<!-- 最顶部 -->
		<div id="top" style="background: white;">
			<div class="leftAndRight" id="topContent">
				<div class="divRow divColumnCenter">
					<img src="img/home1.png" />
					<span>您好，欢迎来到村里村外~</span>
				</div>
				<div class="divRow divColumnCenter">
					<a href="#">登录</a>
					<a class="divColumnCenter" href="#">
						<img src="img/home2.png" />
						<span>注册</span>
					</a>
					<a href="#">个人中心</a>
					<a href="#">我们的村子</a>
					<a href="#">手机版</a>
					<a href="#">关注村子</a>
					<a class="divColumnCenter" href="#">
						<span>村委会/社区</span>
					</a>
				</div>
			</div>
		</div>
		<div style="width: 100%;height: 3.75rem;background: #007D36;" class="divCenter">
			<div style="width: 75rem;height: 100%;" class="leftAndRight">
				<div class="divRow divColumnCenter">
					<img src="img/logo_white.png" style="width: 5rem;" />
					<h2 style="color: white;margin-left: 2.5rem;">个人中心</h2>
				</div>
				<div style="width:25rem;height: 2.125rem;" class="divRow">
					<input style="width: 80%;height: 100%;border: 0.0625rem solid #F5F5F5;padding: 0rem 0.625rem;" />
					<span style="width: 20%;height: 106%;background: #F5F5F5;line-height: 2.125rem;text-align: center;color: #999999;">
						搜索
					</span>
				</div>

			</div>

		</div>

		<div style="width: 100%;height: auto;" class="divCenter" id="content">
			<div style="width: 75rem;" class="divRow">
				<div style="width: 7.5rem;height: auto;margin-top: 1.25rem;" class="divColumn">
					<span class="tabAll" :class="{choice:allChoice}" @click="all()"><a>全部功能</a></span>
					<ul>
						<li v-for="(item,index) in tab1" @click="itemClick1(index)">
							<div class="tab" :class="{choice:item.isChoice}"><a v-html="item.name"></a></div>
						</li>
					</ul>
					<ul style="margin-top: 1.25rem;">
						<li v-for="(item,index) in tab2" @click="itemClick2(index)">
							<div class="tab" :class="{choice:item.isChoice}"><a v-html="item.name"></a></div>
						</li>
					</ul>
				</div>
				<iframe :src="url" style="width: 100%;background: white;margin-top: 1.25rem;" frameborder="0" scrolling="no" id="external-frame"
				 onload="iFrameHeight()"></iframe>
			</div>

		</div>
		<div style="width: 100%;" class="divCenter">
			<div style="width: 75rem;background: white;height: 14rem;" class="divRow divCenter">
				<div style="width: 25%;" class="divRow divCenter">
					<img src="img/home13.png" />
					<span style="color: #999999;margin-left: 0.625rem;font-size: 1rem;">品类齐全 轻松购物</span>
				</div>
				<div style="width: 25%;" class="divRow divCenter">
					<img src="img/home14.png" />
					<span style="color: #999999;margin-left: 0.625rem;font-size: 1rem;">精选生鲜 严格质检</span>
				</div>
				<div style="width: 25%;" class="divRow divCenter">
					<img src="img/home15.png" />
					<span style="color: #999999;margin-left: 0.625rem;font-size: 1rem;">天天低价 畅选无忧</span>
				</div>
				<div style="width: 25%;" class="divRow divCenter">
					<img src="img/home16.png" />
					<span style="color: #999999;margin-left: 0.625rem;font-size: 1rem;">全方位 售后服务</span>
				</div>
			</div>
		</div>
		<!-- 底部介绍 -->
		<div style="width: 100%;15rem;background: #282633;height: 22.5rem;" class="divCenter">
			<div style="width: 75rem;height: 100%;" class="divColumn">
				<div style="width: 100%;height: 70%;" class="divRow">
					<div style="width: 60%;height: 100%;" class="divColumn">
						<div style="width: 100%;color: white;height: 3.25rem;" class="divRow divColumnCenter">
							<h3 style="width: 20%;;">公司介绍</h3>
							<h3 style="width: 20%;">购物指南</h3>
							<h3 style="width: 20%;">支付方式</h3>
							<h3 style="width: 20%;">售后服务</h3>
							<h3 style="width: 20%;">商家服务</h3>
						</div>
						<div style="height: 0.0625rem;background: #000000;width: 100%;"></div>
						<div style="width: 100%;margin-top: 0.875rem;" class="divRow">
							<div style="width: 20%;" class="divColumn">
								<span class="botText">关于村里村外</span>
								<span class="botText">企业荣誉</span>
								<span class="botText">战略合作</span>
								<span class="botText">媒体报道</span>
								<span class="botText">企业风采</span>
								<span class="botText">联系我们</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">免费注册</span>
								<span class="botText">购物流程</span>
								<span class="botText">发票制度</span>
								<span class="botText">配送说明</span>
								<span class="botText">联系客服</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">网上支付</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">验货与拒收政策</span>
								<span class="botText">退换货流程</span>
								<span class="botText">退款流程</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">招商范围</span>
								<span class="botText">商家资质要求</span>
								<span class="botText">入驻流程</span>
								<span class="botText">商家后台</span>
							</div>
						</div>

					</div>
					<div style="width: 40%;height: 100%;" class="divRow">
						<div style="margin: 1.25rem;">
							<img src="img/home17.png" />
						</div>
						<div style="margin:1.25rem 0rem;width: 60%;" class="divColumn">
							<span style="width: 60%;text-align: end;" class="botText">二十四小时咨询热线</span>
							<h1 style="color: white;">021-12454563</h1>
							<div class="divRow" style="margin-top: 0.625rem;">
								<div class="divColumn" style="width: 40%;" class="divColumn divCenter">
									<img src="img/home18.png" style="width: 100%;" />
									<span class="botText" style="text-align: center;">手机APP</span>
								</div>
								<div style="width: 10%;"></div>
								<div class="divColumn" style="width: 40%;" class="divColumn divCenter">
									<img src="img/home18.png" style="width: 100%;" />
									<span class="botText" style="text-align: center;">微信公众号</span>

								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="width: 100%;height: 0.0625rem;background: black;"></div>
				<div style="width: 100%;margin-top: 1.25rem;" class="divColumn">
					<h2 style="color: white;">湖南村里村外电子商务有限公司</h2>
					<div class="divRow divColumnCenter" style="height: 2.625rem;">
						<span class="botText">湖南长沙市XXXXXXX栋XX单元</span>
						<span class="botText" style="margin-left: 2.5rem;">Tel:05456-46546545</span>
						<span class="botText" style="margin-left: 2.5rem;">E-mail:564564654@qq.com</span>

					</div>


				</div>

			</div>


		</div>


		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			window.onload = function() {
				var iframe_obj = document.getElementById("external-frame");
			}

			function iFrameHeight() {
				var ifm = document.getElementById("external-frame");
				if (ifm) {
					if (ifm && !window.opera) {
						if (ifm.contentDocument && ifm.contentDocument.body.offsetHeight) {
							ifm.height = ifm.contentDocument.body.offsetHeight;
						} else if (ifm.Document && ifm.Document.body.scrollHeight) {
							ifm.height = ifm.Document.body.scrollHeight;
						}
						//alert(ifm.height);
						//SetTitle();
					}
				}
			};
			var content = new Vue({
				el: '#content',
				data: {
					tab1: [{
							name: '安全设置',
							isChoice: false
						},
						{
							name: '个人资料',
							isChoice: false
						}
					],
					tab2: [{
							name: '我的收货地址',
							isChoice: false
						},
						{
							name: '已买到的宝贝',
							isChoice: false
						},
						{
							name: '物流信息',
							isChoice: false
						}
					],
					allChoice: true,
					url: 'personalAll.html'
				},
				methods: {
					all: function() {
						content.allChoice = true;
						content.url = 'personalAll.html';
						for (var i = 0; i < content.tab1.length; i++) {
							content.tab1[i].isChoice = false;
						}
						for (var i = 0; i < content.tab2.length; i++) {
							content.tab2[i].isChoice = false;
						}


					},
					itemClick1: function(index) {
						content.allChoice = false;
						for (var i = 0; i < content.tab1.length; i++) {
							if (index == i) {
								content.tab1[i].isChoice = true;
							} else {
								content.tab1[i].isChoice = false;
							}
						}
						for (var i = 0; i < content.tab2.length; i++) {
							content.tab2[i].isChoice = false;
						}
						switch (index) {
							case 0:
								content.url = '';
								break;
							case 1:
								content.url = 'person_data.html';
								break;
						}
					},
					itemClick2: function(index) {
						content.allChoice = false;
						for (var i = 0; i < content.tab2.length; i++) {
							if (index == i) {
								content.tab2[i].isChoice = true;
							} else {
								content.tab2[i].isChoice = false;

							}
						}
						for (var i = 0; i < content.tab1.length; i++) {
							content.tab1[i].isChoice = false;
						}
						switch (index) {
							case 0:
								content.url = 'address.html';
								break;
							case 1:
								content.url = 'havetobuygoods.html';
								break;
							case 2:
								content.url = 'logistics.html';
								break;
						}

					}


				}





			})
		</script>
	</body>
</html>
